<template>
    <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import {
    defineComponent,
    PropType,
    ref,
    Ref,
    onMounted,
    reactive,
    watchEffect,
} from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { forEach, merge, get, map, cloneDeep } from 'lodash-es';
// import {_ }from 'lodash-es'
export default defineComponent({
    name: 'bar',
    props: {
        chartData: {
            type: Array,
            default: () => [],
        },
        option: {
            type: Object,
            default: () => ({}),
        },
        width: {
            type: String as PropType<string>,
            default: '100%',
        },
        height: {
            type: String as PropType<string>,
            default: '280px',
        },
        // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
        seriesColor: {
            type: String,
            default: '#1890ff',
        },
        // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
    },
    setup(props) {
        const chartRef = ref<HTMLDivElement | null>(null);
        const { setOptions, resize, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
        onMounted(() => {
            window.addEventListener('resize', function () {
                resize()
            })
        })

        const topbotm = ref(60)
        const option = reactive({
            tooltip: {
                show: true,
            },
            legend: {
                // "icon": "none",
                left: 'center',
                top: 24,
                orient: "horizontal",
                itemWidth: 6, //图例标记的图形宽度
                itemHeight: 6, //图例标记的图形高度
                y: 'center',
                // borderRadius: 0,

                // formatter: (name) => {
                //     if (name == props.chartData.start.name) {

                //         return '{a|' + name + '}'
                //     } else {
                //         return '{b|' + name + '}'
                //     }
                // },
                textStyle: {
                    rich: {
                        a: {
                            padding: [8, 15, 8, 15],
                            align: 'center',
                        },
                        b: {
                            padding: [8, 15, 8, 15],
                            align: 'center',

                        }
                    }
                },
                data: ['起始充电SOC（%）', '结束充电SOC（%）']

            },
            grid: [{
                left: '5%',
                width: '40%',
                containLabel: true,
                topbotm
            }, {
                left: '50%',
                width: '0%',
                top: topbotm + 16
            }, {
                right: '5%',
                width: '40%',
                containLabel: true,
                topbotm
            }].map(item => merge({
                topbotm
            }, item)),
            xAxis: [{
                name: '充电订单占比',
                type: 'value',
                inverse: true,
                nameTextStyle: {
                    padding: [-0, -75, 0, 0],
                    verticalAlign: topbotm,
                    lineHeight: 80,
                },
                axisLabel: {
                    show: true
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true
                }
            }, {
                gridIndex: 1,
                show: false
            }, {
                gridIndex: 2,
                type: 'value',
                name: '充电订单占比',
                nameTextStyle: {
                    padding: [0, -75, 0, -75],
                    verticalAlign: topbotm,
                    lineHeight: 80,
                },
                axisLabel: {
                    show: true
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true
                }
            }].map((item) => merge(item, {
                axisLabel: {
                    color: '#949AA8',
                    margin: 8
                },
                splitLine: {
                    lineStyle: {
                        color: '#E0E0E0',
                        type: 'solid'
                    }
                },
            })),
            yAxis: [
                {

                    position: 'right',
                    axisLabel: {
                        color: '#262C41',
                        show: true
                    },


                    axisLine: {
                        show: true
                    },
                    type: 'category',
                    inverse: true,

                    axisTick: {
                        show: true
                    },
                    data: map(get(props.chartData, 'end.data'), d => d.label)
                },
                {
                    gridIndex: 1,
                    position: 'center',
                    type: 'category',
                    axisLabel: {  //
                        show: true

                    },
                    axisLine: {
                        show: false
                    }
                },
                {
                    gridIndex: 2,
                    position: 'left',
                    axisLabel: {

                        color: `#262C41`
                    },
                    axisLine: {
                        show: false
                    },
                    type: 'category',
                    inverse: false,

                    axisTick: {
                        show: false
                    },
                    // data: []
                    data: map(get(props.chartData, 'start.data'), d => d.label)
                }
            ],
            series: [{
                type: 'bar',
                barWidth: 11,

                name: '起始充电SOC（%）',
                label: {
                    color: '#767676',
                    position: 'left',
                    show: true,

                },
                itemStyle: {
                    color: '#238bf2',
                    // barBorderRadius: [4, 0, 0, 4]
                },
                data: map(get(props.chartData, 'start.data'), d => d.value)
            },
            {
                type: 'bar',
                barWidth: 11,
                xAxisIndex: 2,
                yAxisIndex: 2,
                name: '结束充电SOC（%）',
                label: {
                    show: true,
                    color: '#767676',
                    position: 'right'
                },
                itemStyle: {
                    color: '#f9c807',
                    // barBorderRadius: [0, 4, 4, 0]
                },
                data: map(get(props.chartData, 'end.data'), d => d.value)
            }
            ]
        });

        watchEffect(() => {
            props.chartData && initCharts();
        });

        function initCharts() {
            if (props.option) {
                Object.assign(option, cloneDeep(props.option));
            }

            // let y1AxisData = props.chartData.start.data.map((item) => {
            //     return item.label;
            // });
            // let y2AxisData = props.chartData!.end.data.map((item) => {
            //     return item.label;
            // });

            option.series[0].data = props.chartData.start.data.map((item) => {
                return item.value;
            });
            option.series[1].data = props.chartData.end.data.map((item) => {
                return item.value;
            });

            console.log(props.chartData, '.data.data.data.data')
            setOptions(option);
        }
        return { chartRef };
    },
});
</script>
